<template>
    <view class="container">
        <image :src="`/gongyi/common/download?name=${activity.picture}`" class="aaa"></image>
        <view class="example">
            <!-- 基础用法，不包含校验规则 -->
            <uni-forms ref="baseForm" labelWidth="80px">
                <uni-forms-item label="活动名称:" style="align-items: center;">
                    <text>{{activity.activityName}}</text>
                </uni-forms-item>
                <uni-forms-item label="活动地点:" style="align-items: center;">
                    <text>{{activity.activityPlace}}</text>
                </uni-forms-item>
                <uni-forms-item label="开始时间:" style="align-items: center;">
                    <text>{{formatDate(activity.beginTime)}}</text>
                </uni-forms-item>
                <uni-forms-item label="活动截止时间" style="align-items: center;">
                    <text>{{formatDate(activity.endTime)}}</text>
                </uni-forms-item>
                <uni-forms-item label="报名开始时间" style="align-items: center;">
                    <text>{{formatDate(activity.begin)}}</text>
                </uni-forms-item>
                <uni-forms-item label="报名截止时间" style="align-items: center;">
                    <text>{{formatDate(activity.end)}}</text>
                </uni-forms-item>
                <uni-forms-item label="人数限制" style="align-items: center;">
                    <text>{{activity.limitPerson}}</text>
                </uni-forms-item>
                <uni-forms-item label="联系方式" style="align-items: center;">
                    <text>{{activity.contact}}</text>
                </uni-forms-item>
                <uni-forms-item label="活动介绍" style="align-items: center;">
                    <text>{{activity.introduction}}</text>
                </uni-forms-item>
                <button type="primary" v-if="tag == '1'" @click="submit">报名</button>
                <button type="primary" v-if="tag == '2'" @click="sendCredit">分发学分并结束活动</button>
            </uni-forms>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 基础表单数据
                activity: {},
                activityId: '',
                userId: '',
                tag: false,
            }
        },
        onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
            this.userId = uni.getStorageSync("user").id;
            this.tag = option.tag;
            this.activityId = option.id;
            console.log(this.activityId, "asdsadas");
            console.log(this.tag);
            uni.request({
                url: '/gongyi/activity/searchById?id=' + option.id,
                success: (res) => {
                    this.activity = res.data.activity,
                        console.log(this.activity)
                }
            })
        },
        methods: {
            submit() {
                uni.showModal({
                    title: "提示",
                    content: "确认报名？",
                    // showCancel: false,
                    success: (res) => {
                        if (res.confirm) {
                            console.log('用户点击确定');
                            uni.request({
                                url: '/gongyi/user/join',
                                method: 'POST',
                                header: {
                                    'Content-Type': 'application/json',
                                },
                                data: {
                                    userId: this.userId,
                                    activityId: this.activity.id
                                },
                                success: (res) => {
                                    // console.log(this.userId,"-- and --",this.activity.id )
                                    // console.log(res)
                                    uni.navigateTo({
                                        url: '/pages/fabu/more-activity/more-activity'
                                    })
                                }
                            })
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
            formatDate(aDate) {
                let dt = new Date(aDate)
                return dt.getFullYear() + '年' + (dt.getMonth() + 1) + '月' + dt.getDate() +
                    '日 ' + dt.getHours() + ':' + dt.getMinutes()
                return aDate;
            },
            sendCredit() {
                console.log(this.activityId, "asddddddddd")
                uni.showModal({
                    title: "提示",
                    content: "确认分发学分（完成后将清除活动）？",
                    // showCancel: false,
                    success: async (res) => {
                        if (res.confirm) {
                            console.log('用户点击确定');
                            await uni.request({
                                url: '/gongyi/activity/finishPub?id=' + this.activityId,
                                method: 'GET',
                                success: res => {
                                    uni.navigateTo({
                                        url: "/pages/my/myPub/myPub"
                                    });
                                    // this.activities = res.data.activities
                                    // console.log(this.userInfo.id)
                                }
                            })
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            }
        }
    }
</script>

<style lang="scss">
    .example {
        padding: 15px;
        background-color: #fff;
    }

    .segmented-control {
        margin-bottom: 15px;
    }

    .button-group {
        margin-top: 15px;
        display: flex;
        justify-content: space-around;
    }

    .form-item {
        display: flex;
        align-items: center;
        flex: 1;
    }

    .button {
        display: flex;
        align-items: center;
        height: 35px;
        line-height: 35px;
        margin-left: 10px;
    }

    .aaa {
        align-items: center;
        padding-left: 80rpx;
        border-radius: 5%;
    }
</style>